<!-- 会员页 -->
<template>
  <div class="main_page">
    <headerNav />
    <div class="mincard mindWidth">
      <span @click="$router.push('/')">首页</span>>
      <span>VIP服务</span>
    </div>
    <div class="Lvip_top">
      <!-- <img :src="imgBaseUrl + 'static/pc-huodong-bg.png'" /> -->
      <img src="../../static/image/vip/vip_banner.jpg" />
    </div>
    <div class="Lvip_main">
      <div class="Lvip_content_content">
        <div class="Lvip_content_content_tcbt">
          <h3>
            投入有限
            <span style="margin: 0 20px">&lt;</span>回报无限
          </h3>
          <p>升级VIP特权，畅享1000W+数据红利</p>
          <p>
            <span></span>
          </p>
        </div>
        <!-- 购买会员 -->
        <div class="Lvip_content_content_tccontent">
          <!-- 模块1 -->
          <div class="tccontent_content">
            <div class="tccontent_content_content">
              <div class="tccontent_topright">
                <p>买1送1·送1个月</p>
              </div>
              <div class="tccontent_content_content_top">
                <p>1+1个月</p>
              </div>
              <div class="tccontent_content_content_content">
                <div class="tccontent_content_content_content_top">
                  <p>
                    138
                    <span>元</span>
                  </p>
                  <span>300元</span>
                </div>
                <p
                  @click="ljkt('001', '138')"
                  class="tccontent_content_content_content_ljkts"
                  style="border: 2px solid #8a9bb8"
                >立即开通</p>
                <p class="tccontent_content_content_content_jqt">新人尝鲜体验</p>
                <p class="tccontent_content_content_content_bkx"></p>
              </div>
            </div>
          </div>
          <!-- 模块二 -->
          <div class="tccontent_content">
            <div class="tccontent_content_content">
              <div class="tccontent_topright">
                <p>买1送1·送6个月</p>
              </div>
              <div
                class="tccontent_content_content_top"
                style="background: linear-gradient(90deg, #4d95fc, #2b69d9)"
              >
                <p>6+6个月</p>
              </div>
              <div class="tccontent_content_content_content">
                <div class="tccontent_content_content_content_top">
                  <p>
                    688
                    <span>元</span>
                  </p>
                  <span>1200</span>
                </div>
                <p
                  @click="ljkt('006', '688')"
                  class="tccontent_content_content_content_ljkts"
                  style="border: 2px solid #3f7ef2"
                >立即开通</p>
                <p class="tccontent_content_content_content_jqt">仅57元/月</p>
                <p class="tccontent_content_content_content_bkx"></p>
              </div>
            </div>
          </div>
          <!-- 模块三 -->
          <div class="tccontent_content" style="position: relative">
            <div class="tccontent_content_content" style="z-index: 99">
              <div class="tccontent_topright">
                <p>买1送1·送12个月</p>
              </div>
              <div
                class="tccontent_content_content_top"
                style="background: linear-gradient(90deg, #fdd35f, #fcb416)"
              >
                <p>12+12个月</p>
              </div>
              <div class="tccontent_content_content_content">
                <div class="tccontent_content_content_content_top">
                  <p style="color: red">
                    988
                    <span>元</span>
                  </p>
                  <span>1800元</span>
                </div>
                <p
                  @click="ljkt('003', '988')"
                  class="tccontent_content_content_content_ljkts"
                  style="border: 2px solid #fe7348"
                >立即开通</p>
                <p class="tccontent_content_content_content_jqt">仅41元/月</p>
                <p class="tccontent_content_content_content_bkx"></p>
              </div>
            </div>
            <!-- <div class="shake-slow">中秋送礼</div> -->
          </div>
          <!-- 模块四 -->
          <div class="tccontent_content">
            <div class="tccontent_content_content">
              <div class="tccontent_topright">
                <p>买1送1·送24个月</p>
              </div>
              <div
                class="tccontent_content_content_top"
                style="background: linear-gradient(90deg, #52729e, #2c4772)"
              >
                <p>24+24个月</p>
              </div>
              <div class="tccontent_content_content_content">
                <div class="tccontent_content_content_content_top">
                  <p>
                    1688
                    <span>元</span>
                  </p>
                  <span>2800元</span>
                </div>
                <p
                  @click="ljkt('010', '1688')"
                  class="tccontent_content_content_content_ljkts"
                  style="border: 2px solid #698ec2"
                >立即开通</p>
                <p class="tccontent_content_content_content_jqt">只需1.17元/天</p>
                <p class="tccontent_content_content_content_bkx"></p>
              </div>
            </div>
          </div>
          <!-- 模块五 -->
          <div class="tccontent_content">
            <div class="tccontent_content_content">
              <div class="tccontent_topright">
                <p>热销</p>
              </div>
              <div
                class="tccontent_content_content_top"
                style="background: linear-gradient(90deg, #4b4871, #23213a)"
              >
                <p>查询劵</p>
              </div>
              <div class="tccontent_content_content_content">
                <div class="tccontent_content_content_content_top">
                  <p>
                    8.8
                    <span>元/10次</span>
                  </p>
                  <span>30元</span>
                </div>
                <p
                  @click="ljkt('14', '8.8')"
                  class="tccontent_content_content_content_ljkts"
                  style="border: 2px solid #cfa980"
                >立即开通</p>
                <p class="tccontent_content_content_content_jqt">紧急查询就选它</p>
                <p class="tccontent_content_content_content_bkx"></p>
              </div>
            </div>
          </div>
        </div>
        <!-- VIP会员8大升级权益 -->
        <div class="Lvip_content_content_tcbt">
          <h3>VIP会员8大升级权益</h3>
          <p>
            <span></span>
          </p>
        </div>
        <!-- 内容 -->
        <div class="Lvip_content_content_zxqy">
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_zccts.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">政策推送</h3>
              <p class="zxqy_content_content_ps1">无限制订阅全国部门</p>
              <p class="zxqy_content_content_ps2">最新政策实时推送</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_qycx.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">企业查询</h3>
              <p class="zxqy_content_content_ps1">资质荣誉/知识产权/政府</p>
              <p class="zxqy_content_content_ps2">补助信息随心查询</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_qydb.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">企业对比</h3>
              <p class="zxqy_content_content_ps1">多家企业信息一键对比</p>
              <p class="zxqy_content_content_ps2">差异一目了然</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_zgbs.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">数据导出</h3>
              <p class="zxqy_content_content_ps1">企业对报告</p>
              <p class="zxqy_content_content_ps2">项目企业名单一键导出</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_zgbs.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">尊贵标识</h3>
              <p class="zxqy_content_content_ps1">VIP专属标识</p>
              <p class="zxqy_content_content_ps2">尽享身份特权</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_yxty.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">精准获客</h3>
              <p class="zxqy_content_content_ps1">微信分享政策文章</p>
              <p class="zxqy_content_content_ps2">获取访客联系线索</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_pptg.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">品牌推广</h3>
              <p class="zxqy_content_content_ps1">服务商品牌入驻</p>
              <p class="zxqy_content_content_ps2">百万精准流量加特</p>
            </div>
          </div>
          <div class="zxqy_content">
            <div class="zxqy_content_content">
              <div class="zxqy_content_content_imgs">
                <img src="../../../static/image/vip/vip_zxkh.png" alt />
              </div>
              <h3 class="zxqy_content_content_zcts">专享客服</h3>
              <p class="zxqy_content_content_ps1">1V1贴心客服</p>
              <p class="zxqy_content_content_ps2">反馈优先响应</p>
            </div>
          </div>
        </div>
        <!-- VIP特权详细对比 -->
        <div class="Lvip_content_content_tcbt">
          <h3 style="bottom: 0">VIP特权详细对比</h3>
          <p>
            <span></span>
          </p>
        </div>
        <!-- 祥比内容 -->
        <div class="Lvip_content_content_xxdb" id="Lvip_xxdb">
          <div class="xxdb_top">
            <p class="xxdb_top_left"></p>
            <p class="xxdb_top_content"></p>
            <p class="xxdb_top_right">VIP会员</p>
          </div>
          <!-- 標題頭 -->
          <div class="xxdb_content" :class="isFixed ? 'active' : ''">
            <div class="xxdb_content_left">套餐对比</div>
            <div class="xxdb_content_content" style="width: 159px">
              <p>普通会员</p>
              <h3>0元</h3>
              <span
                style="
                  background: #fff;
                  color: #8a9bb8;
                  border: 1px solid #8a9bb8;
                "
                onclick="ljsy()"
              >立即使用</span>
            </div>
            <div class="xxdb_content_content">
              <p>1个月</p>
              <h3>138元</h3>
              <span @click="ljkt(1, 138)">立即开通</span>
            </div>
            <div class="xxdb_content_content">
              <p>6个月</p>
              <h3>688元</h3>
              <span @click="ljkt(6, 688)">立即开通</span>
            </div>
            <div class="xxdb_content_content">
              <p>12个月</p>
              <h3 style="color: red">988元</h3>
              <span @click="ljkt(3, 988)">立即开通</span>
            </div>
            <div class="xxdb_content_content">
              <p>24个月</p>
              <h3>1688元</h3>
              <span @click="ljkt(10, 1688)">立即开通</span>
            </div>
          </div>
          <!-- 內容 -->
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>政府黄页</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>政府查询</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>政府匹配</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>企业评分</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>项目查询</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>项目地图</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>可关注部门</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <p
                v-if="commonVip.departmentConcernNumber"
              >{{commonVip.departmentConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip1.departmentConcernNumber">{{vip1.departmentConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip6.departmentConcernNumber">{{vip6.departmentConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip12.departmentConcernNumber">{{vip12.departmentConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip24.departmentConcernNumber">{{vip24.departmentConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>可关注企业</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <p v-if="commonVip.companyConcernNumber">{{commonVip.companyConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip1.companyConcernNumber">{{vip1.companyConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip6.companyConcernNumber">{{vip6.companyConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip12.companyConcernNumber">{{vip12.companyConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip24.companyConcernNumber">{{vip24.companyConcernNumber + '个'}}</p>
              <p v-else>不限</p>
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>企业项目信息查询</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <p v-if="commonVip.projectQueryNumber">1天/{{commonVip.projectQueryNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip1.projectQueryNumber">{{vip1.projectQueryNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip6.projectQueryNumber">{{vip6.projectQueryNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip12.projectQueryNumber">{{vip12.projectQueryNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip24.projectQueryNumber">{{vip24.projectQueryNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>企业对比</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <p v-if="commonVip.companyContrastNumber">{{commonVip.companyContrastNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip1.companyContrastNumber">{{vip1.companyContrastNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip6.companyContrastNumber">{{vip6.companyContrastNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip12.companyContrastNumber">{{vip12.companyContrastNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip24.companyContrastNumber">{{vip24.companyContrastNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>数据导出</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content">
              <p v-if="commonVip.downloadNumber">{{commonVip.downloadNumber + '次'}}</p>
              <p v-else>0次</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip1.downloadNumber">{{vip1.downloadNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip6.downloadNumber">{{vip6.downloadNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip12.downloadNumber">{{vip12.downloadNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
            <div class="xxdb_bottom_right">
              <p v-if="vip24.downloadNumber">{{vip24.downloadNumber + '次'}}</p>
              <p v-else>不限</p>
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>文章分享精准获客</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content"></div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>VIP会员专属标识</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content"></div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>新功能优先体验</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content"></div>
            <div class="xxdb_bottom_right"></div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>尊享客服</span>
            </div>
            <div class="xxdb_bottom_content"></div>
            <div class="xxdb_bottom_right"></div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
          <div class="xxdb_bottom">
            <div class="xxdb_bottom_left">
              <span>服务商品牌推广</span>
              <img src="../../../static/image/vip/vip_wh.png" alt />
            </div>
            <div class="xxdb_bottom_content"></div>
            <div class="xxdb_bottom_right"></div>
            <div class="xxdb_bottom_right"></div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
            <div class="xxdb_bottom_right">
              <img src="../../../static/image/vip/vip_dui.png" alt />
            </div>
          </div>
        </div>
        <!-- 告别低效的数据信息收集烦恼 -->
        <div class="Lvip_content_content_tcbt">
          <h3>告别低效的数据信息收集烦恼</h3>
          <p>留出更多的时间，创造价值，享受生活</p>
          <p>
            <span></span>
          </p>
        </div>
        <div class="Lvip_content_content_sjzl">
          <div class="sjzl_content">
            <div class="sjzl_content_left">
              <img src="../../../static/image/vip/vip_zxzc.png" alt />
            </div>
            <div class="sjzl_content_right">
              <div class="sjzl_content_right_content">
                <h3>最新政策第一时间送达</h3>
                <p>无限制订阅全国部门政策，实时接收，掌握行业最新动态，占尽先机</p>
              </div>
            </div>
          </div>
        </div>
        <div class="Lvip_content_content_sjzl">
          <div class="sjzl_content">
            <div class="sjzl_content_left" style="float: right">
              <img src="../../../static/image/vip/vip_qyksc.png" alt />
            </div>
            <div class="sjzl_content_right" style="float: left">
              <div class="sjzl_content_right_content">
                <h3>企业科创数据快速查询</h3>
                <p>
                  无限制查询企业信息，已获补贴 / 荣誉资质 / 知识产权 /
                  专利等一键查询，挖掘企业空白点
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="Lvip_content_content_tcbt">
          <h3>全方位量身定制的项目工具</h3>
          <p>累计帮助10w+企业服务人员，提供方案/决策/营销的数据支持</p>
          <p>
            <span></span>
          </p>
        </div>
        <div class="Lvip_content_content_sjzl">
          <div class="sjzl_content">
            <div class="sjzl_content_left">
              <img src="../../../static/image/vip/vip_sjzlleft.png" alt />
            </div>
            <div class="sjzl_content_right">
              <div class="sjzl_content_right_content">
                <h3>一目尽览差异</h3>
                <p>支持多家企业信息数据对比，报告一键</p>
                <p>导出，帮助企业了解同行情况</p>
              </div>
            </div>
          </div>
          <div class="sjzl_content">
            <div class="sjzl_content_left" style="float: right">
              <img src="../../../static/image/vip/vip_sjzlright.png" alt />
            </div>
            <div class="sjzl_content_right" style="float: left">
              <div class="sjzl_content_right_content">
                <h3>一手尽观全局</h3>
                <p>企业项目地图数据覆盖全国，可视化展</p>
                <p>示，更直观掌握各区域项目开展情况</p>
              </div>
            </div>
          </div>
          <div class="sjzl_content">
            <div class="sjzl_content_left">
              <img src="../../../static/image/vip/vip_yzqshk.png" alt />
            </div>
            <div class="sjzl_content_right">
              <div class="sjzl_content_right_content">
                <h3>一转轻松获客</h3>
                <p>转发分享政策通知或自撰文章到微信</p>
                <p>好友/社群/朋友圈，获取访客联系线索</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="Lvip_bottom">
        <div class="Lvip_bottom_dzy">
          <div class="Lvip_content_content_tcbt">
            <h3>他们都在用</h3>
            <p>一起成为高效的优秀项目达人</p>
          </div>
          <div class="dzy_bottom">
            <div class="dzy_bottom_content">
              <img src="../../../static/image/vip/parter-1.png" alt />
            </div>
            <div class="dzy_bottom_content">
              <img src="../../../static/image/vip/parter-2.png" alt />
            </div>
            <div class="dzy_bottom_content">
              <img src="../../../static/image/vip/parter-5.png" alt />
            </div>
            <div class="dzy_bottom_content">
              <img src="../../../static/image/vip/parter-6.png" alt />
            </div>
          </div>
        </div>
        <div class="Lvip_bottom_xlfb">
          <img src="../../../static/image/vip/vip_xlfbbj.png" alt />
          <div class="xlfb_content">
            <h3>现在就使用比目镜，体验效率翻倍</h3>
            <span onclick="ljkthddb()">立即开通</span>
          </div>
        </div>
      </div>
      <div class="Lzvip_gz">
        <div class="text">
          <p style="font-size: 20px">【活动细则】</p>
          <p>一、活动时间：2022年8月01日-12月31日</p>
          <p>二、活动对象：平台新老会员</p>
          <p>三、活动内容：活动期间，凡订购VIP特权者，均可享受活动页面的优惠价格，成功购买后添加小助手微信领取相应礼包，详情请咨询小助手。</p>
          <p>四、比目镜平台享有本次活动最终解释权</p>
        </div>
        <img src="../../../static/image/vip/viphdgz.png" alt />
      </div>
      <div class="Lzvip_wtjd">
        <div class="wtjd_content">
          <div class="Lvip_content_content_tcbt">
            <h3 style="margin: 0">常见问题解答</h3>
            <p>
              <span></span>
            </p>
          </div>
          <div class="wtjd_content_content">
            <div class="wtjd_content_content_sx"></div>
            <div class="wtjd_content_content_contet">
              <div class="wtjd_content_content_contet_top">
                <div class="wtjd_content_content_contet_top_left"></div>
                <h3>1、可以开具发票吗？</h3>
              </div>
              <div class="wtjd_content_content_contet_bottom">
                <p>支付金额满500以上，可以免费开具增值税普通发票，500以下收取10%的手续费。</p>
              </div>
            </div>
            <div class="wtjd_content_content_contet">
              <div class="wtjd_content_content_contet_top">
                <div class="wtjd_content_content_contet_top_left"></div>
                <h3>2、VIP会员到期后，会有什么变化？</h3>
              </div>
              <div class="wtjd_content_content_contet_bottom">
                <p>账号将恢复为普通会员，关注部门数量超出部分，系统会自动移除，用户可根据提示重新选择，提前续费则可继续保留，到期则无法继续使用高级功能。</p>
              </div>
            </div>

            <div class="wtjd_content_content_contet">
              <div class="wtjd_content_content_contet_top">
                <div class="wtjd_content_content_contet_top_left"></div>
                <h3>3、怎么支付，支付对公转账？</h3>
              </div>
              <div class="wtjd_content_content_contet_bottom">
                <p>目前仅支持微信，暂未开通对公转账功能，不便之处，敬请谅解。</p>
              </div>
            </div>
            <div class="wtjd_content_content_contet">
              <div class="wtjd_content_content_contet_top">
                <div class="wtjd_content_content_contet_top_left"></div>
                <h3>4、关于退款</h3>
              </div>
              <div class="wtjd_content_content_contet_bottom">
                <p>所有会员付费服务，开通后不支持退款。</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 支付弹框 -->
    <dredgePage @isShow="close" v-show="visible" :type="type" @currentItem="currentItem" />
    <!-- 登录弹窗 -->
    <login-dialog ref="login" @reload="reload"></login-dialog>
    <footerNav />
    <navigation />
  </div>
</template>

<script>
import loginDialog from "../../components/login_item/LoginDialog"; //登录弹窗
import { commonRequest, postRequest } from "../../api/api.js"; // 请求
import dredgePage from "../../components/shareCard/dredgePage.vue";
import { getMemberList, imgBaseUrl } from "../../api/api.js";
export default {
  components: {
    dredgePage, // 支付弹框
    loginDialog
  },
  data() {
    //这里存放数据
    return {
      imgBaseUrl: imgBaseUrl,
      getBackgroundInfo: "", //获取背景图片信息
      isFixed: false, // 是否固定vip头部信息
      visible: false, // 是否显示支付弹框
      type: {}, // 当前选中的开通年限
      userInfo: {},
      qrcode: "",
      commonVip: {},
      vip1: {},
      vip6: {},
      vip12: {},
      vip24: {}
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollHandle);
    this.getMenber();
  },
  methods: {
    // 登录刷新当前页
    reload() {
      location.reload();
    },
    getMenber() {
      getMemberList().then(res => {
        this.commonVip = res.result[0];
        this.vip1 = res.result[1];
        this.vip6 = res.result[2];
        this.vip12 = res.result[3];
        this.vip24 = res.result[4];
      });
    },
    // 接收关闭按钮的值
    close() {
      this.visible = false;
    },
    // 获取子组件传入的值
    currentItem(val) {
      this.type = val;
    },
    // 获取背景图片
    getBackgroundImage() {
      commonRequest("/api/home/getHomeBackgroundConfigInfo").then(res => {
        // console.log(res);
        if (res.length > 0) {
          this.getBackgroundInfo = res;
        }
      });
    },
    // 获取页面滚动的高度
    scrollHandle() {
      // console.log(document.documentElement.scrollTop);
      let top = document.documentElement.scrollTop;
      // console.log(top);
      this.isFixed = top >= 2344 && top <= 3026;
    },
    openLoginWindow(item, money) {
      let token = localStorage.getItem("saasToken");
      if (token) {
        this.type = {
          item,
          money
        };
        this.visible = true;
      } else {
        this.$refs.login.open();
      }
    },
    // 点击立即开通
    ljkt(index, money) {
      if (localStorage.getItem("userInfo")) {
        this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
        this.openLoginWindow(index, money);
      } else {
        //跳转登录
        this.openLoginWindow(index, money);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.main_page {
  background: #fff;
  width: 100%;
  .mincard {
    span {
      font-size: 14px;
      cursor: pointer;
      margin: 0 10px;
    }
  }
  .Lvip_top {
    width: 100%;
    // position: relative;
    height: 690px;
    // background-image: url("../../static/image/vip/pc-huodong-bg.png");
    // background-repeat: no-repeat;
    // background-position: center center;
    // background-size: 100% 100%;
    img {
      width: 100%;
      height: 100%;
      // margin: 0 auto;
    }
  }

  .Lvip_main {
    max-width: 1920px;
    margin: 0 auto;
    background-image: url("../../../static/image/vip/tcbj.png");

    background-repeat: no-repeat;

    .Lvip_content_content {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .Lvip_content_content_tcbt {
        margin-top: 100px;

        h3 {
          font-size: 40px;
          text-align: center;
          color: #404040;
          margin-bottom: 10px;
        }

        p {
          font-size: 20px;
          text-align: center;
          color: #404040;

          span {
            display: inline-block;
            margin-top: 28px;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #4d95fc, #2b69d9);
          }
        }
      }

      /* 购买会员 */

      .Lvip_content_content_tccontent {
        margin-top: 70px;
        overflow: hidden;

        .tccontent_content {
          float: left;
          width: 20%;
          padding: 30px 10px;

          &:hover .tccontent_content_content {
            transform: translateY(-15px);
            box-shadow: rgba(250 246 246, 0.5) 1px 10px 0px 5px;
          }

          .tccontent_content_content {
            transition: all 0.3s;
            position: relative;
            top: 0;
            border-radius: 8px;

            .tccontent_topright {
              position: absolute;
              top: 0;
              right: 0;
              background-color: red;
              z-index: 1;
              border-top-right-radius: 5px;
              border-bottom-left-radius: 6px;

              p {
                color: #fff;
                font-size: 12px;
                padding: 2px 5px;
              }
            }

            .tccontent_content_content_top {
              width: 100%;
              height: 70px;
              background: linear-gradient(90deg, #becde3, #8596b4);
              border-radius: 8px 8px 0px 0px;
              position: relative;

              p {
                position: absolute;
                left: 50%;
                top: 60%;
                transform: translate(-50%, -50%);
                font-size: 18px;
                text-align: center;
                color: #ffffff;
              }
            }

            .tccontent_content_content_content {
              padding: 30px 20px 0 20px;
              border-radius: 0 0 8px 8px;
              box-sizing: border-box;
              border: 1px solid #eee;
              text-align: center;

              .tccontent_content_content_content_top {
                text-align: center;

                & > p {
                  height: 56px;
                  display: flex;
                  font-size: 40px;
                  font-weight: 700;
                  color: #333333;
                  display: inline-block;
                  vertical-align: top;

                  & > span {
                    font-size: 16px;
                    font-weight: normal;
                    color: #333333;
                  }
                }

                & > span {
                  display: block;
                  height: 22px;
                  font-size: 16px;
                  font-weight: 400;
                  text-decoration: line-through;
                  text-align: center;
                  color: #c5c5c5;
                }
              }

              .tccontent_content_content_content_ljkts {
                height: 40px;
                background: #ffffff;
                border: 2px solid #8a9bb8;
                border-radius: 4px;
                box-sizing: border-box;
                text-align: center;
                line-height: 36px;
                margin: 20px 20px 0 20px;
                cursor: pointer;
              }

              .tccontent_content_content_content_jqt {
                height: 20px;
                font-size: 14px;
                font-weight: 400;
                text-align: center;
                color: #cfa980;
                margin-top: 20px;
              }

              .tccontent_content_content_content_bkx {
                height: 1px;
                background: #daeaf5;
                margin-top: 30px;
                margin-bottom: 25px;
              }
            }
          }
        }
      }

      /* VIP会员8大升级权益 */

      .Lvip_content_content_tcbt {
        margin-top: 100px;

        h3 {
          font-size: 40px;
          text-align: center;
          color: #404040;
          margin-bottom: 10px;
        }

        p {
          font-size: 20px;
          text-align: center;
          color: #404040;

          span {
            display: inline-block;
            margin-top: 28px;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #4d95fc, #2b69d9);
          }
        }
      }

      /* 权益内容 */

      .Lvip_content_content_zxqy {
        padding: 40px 0px;
        overflow: hidden;

        .zxqy_content {
          float: left;
          width: 25%;
          padding: 0px 10px;
          margin-bottom: 40px;

          &:hover .zxqy_content_content {
            transform: translateY(-15px);
            box-shadow: 1px 4px 8px #eee;
          }

          .zxqy_content_content {
            border-radius: 8px;
            border: 1px solid #eee;
            padding: 30px 0;
            transition: all 0.3s;

            .zxqy_content_content_imgs {
              text-align: center;

              img {
                width: 48px;
                height: 44px;
                display: inline-block;
              }
            }

            .zxqy_content_content_zcts {
              font-size: 20px;
              font-weight: 700;
              text-align: center;
              color: #333333;
              margin-top: 10px;
            }

            .zxqy_content_content_ps1 {
              margin-top: 10px;
              font-size: 14px;
              font-weight: 400;
              text-align: center;
              color: #999999;
              line-height: 20px;
            }

            .zxqy_content_content_ps2 {
              font-size: 14px;
              font-weight: 400;
              text-align: center;
              color: #999999;
              line-height: 20px;
            }
          }
        }
      }

      // VIP特权详细对比
      .Lvip_content_content_tcbt {
        margin-top: 100px;

        h3 {
          font-size: 40px;
          text-align: center;
          color: #404040;
        }

        p {
          font-size: 20px;
          text-align: center;
          color: #404040;

          span {
            display: inline-block;
            margin-top: 28px;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #4d95fc, #2b69d9);
          }
        }
      }

      // 祥比内容
      .Lvip_content_content_xxdb {
        margin-top: 70px;

        .xxdb_top {
          overflow: hidden;

          .xxdb_top_left {
            float: left;
            width: 240px;
            height: 32px;
            background: #d5e4ff;
          }

          .xxdb_top_content {
            float: left;
            width: 160px;
            height: 32px;
            background: #3f7ef2;
          }

          .xxdb_top_right {
            float: left;
            width: 800px;
            height: 32px;
            line-height: 32px;
            background: #373434;
            text-align: center;
            font-size: 16px;
            color: #cfa980;
          }
        }

        .xxdb_content {
          overflow: hidden;
          border: 1px solid #f9f9f9;

          &.active {
            position: fixed;
            top: 0;
            background: #fff;
            z-index: 100;
          }

          .xxdb_content_left {
            float: left;
            width: 239px;
            height: 128px;
            line-height: 128px;
            text-align: center;
            font-size: 20px;
            font-weight: 700;
            color: #333333;
          }

          .xxdb_content_content {
            float: left;
            height: 128px;
            width: 200px;

            & > p {
              height: 20px;
              font-size: 14px;
              text-align: center;
              color: #333333;
              margin-top: 16px;
            }

            & > h3 {
              margin-top: 10px;
              height: 25px;
              font-size: 18px;
              font-weight: 700;
              text-align: center;
              color: #333333;
              margin-bottom: 8px;
            }

            & > span {
              margin: 0px 35px;
              display: block;
              height: 32px;
              line-height: 32px;
              text-align: center;
              background: rgb(63, 126, 242);
              // border: 1px solid rgb(63, 126, 242);
              border-radius: 4px;
              color: rgb(255, 255, 255);
              font-size: 14px;
              cursor: pointer;

              &:hover {
                background-color: red;
                border: none;
              }
            }
          }
        }

        .xxdb_bottom {
          overflow: hidden;

          &:nth-child(odd) {
            background: #f0f7fb;
          }

          .xxdb_bottom_left {
            float: left;
            width: 240px;
            height: 40px;
            line-height: 40px;
            text-align: center;

            span {
              display: inline-block;
              font-size: 14px;
              line-height: 20px;
              color: #333333;
              margin-right: 6px;
            }

            img {
              position: relative;
              top: 13px;
              width: 14px;
              left: 177px;
            }
          }

          .xxdb_bottom_right {
            float: left;
            width: 200px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;

            img {
              position: relative;
              top: 15px;
              width: 14px;
              left: 90px;
            }
          }

          .xxdb_bottom_content {
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;

            img {
              position: relative;
              top: 14px;
              width: 14px;
              left: 73px;
            }
          }
        }
      }

      // 告别低效的数据信息收集烦恼
      .Lvip_content_content_tcbt {
        margin-top: 100px;

        h3 {
          font-size: 40px;
          text-align: center;
          color: #404040;
          margin-bottom: 10px;
        }

        p {
          font-size: 20px;
          text-align: center;
          color: #404040;

          span {
            display: inline-block;
            margin-top: 28px;
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, #4d95fc, #2b69d9);
          }
        }
      }

      .Lvip_content_content_sjzl {
        .sjzl_content {
          overflow: hidden;
          padding: 0 100px;
          margin-top: 70px;

          h3 {
            line-height: 56px;
            font-size: 36px;
            font-weight: 700;
            text-align: left;
            color: #333333;
            margin-bottom: 15px;
          }

          p {
            font-size: 18px;
            font-weight: 400;
            text-align: left;
            color: #999999;
          }

          .sjzl_content_left {
            float: left;
            width: 426px;
            height: 261px;

            img {
              width: 100%;
            }
          }

          .sjzl_content_right {
            float: right;
            width: 426px;
            height: 261px;

            .sjzl_content_right_content {
              padding-top: 50px;
            }
          }
        }
      }

      .Lvip_content_content_tcbt {
        margin-top: 100px;

        h3 {
          font-size: 40px;
          text-align: center;
          color: #404040;
          margin-bottom: 10px;
        }

        p {
          font-size: 20px;
          text-align: center;
          color: #404040;
        }
      }

      .Lvip_content_content_sjzl {
        .sjzl_content {
          overflow: hidden;
          padding: 0 100px;
          margin-top: 70px;

          .sjzl_content_left {
            float: left;
            width: 426px;
            height: 261px;

            img {
              width: 100%;
            }
          }

          .sjzl_content_right {
            float: right;
            width: 426px;
            height: 261px;

            .sjzl_content_right_content {
              padding-top: 50px;

              h3 {
                line-height: 56px;
                font-size: 36px;
                font-weight: 700;
                text-align: left;
                color: #333333;
                margin-bottom: 15px;
              }

              p {
                font-size: 18px;
                font-weight: 400;
                text-align: left;
                color: #999999;
              }
            }
          }
        }
      }
    }

    .Lvip_bottom {
      margin-top: 70px;

      .Lvip_bottom_dzy {
        padding: 60px 0 100px 0;
        background: #f6f9ff;

        .Lvip_content_content_tcbt {
          margin-top: 0;

          h3 {
            font-size: 40px;
            text-align: center;
            color: #404040;
            margin-bottom: 10px;
          }

          p {
            font-size: 20px;
            text-align: center;
            color: #404040;
          }
        }

        .dzy_bottom {
          width: 1200px;
          margin: 0 auto;
          overflow: hidden;
          margin-top: 60px;

          .dzy_bottom_content {
            float: left;
            width: 25%;
            text-align: center;

            img {
              width: 280px;
            }
          }
        }
      }

      .Lvip_bottom_xlfb {
        position: relative;
        overflow: hidden;

        img {
          max-width: 1920px;
          margin: 0 auto;
        }

        .xlfb_content {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          text-align: center;

          h3 {
            line-height: 50px;
            font-size: 36px;
            font-weight: 700;
            text-align: center;
            color: #ffffff;
            margin-bottom: 26px;
          }

          span {
            display: inline-block;
            width: 150px;
            line-height: 46px;
            background: #ffffff;
            border-radius: 8px;
            color: #3f7ef2;
            font-size: 16px;
            cursor: pointer;
          }
        }
      }
    }

    .Lzvip_gz {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 1200px;
      margin: 60px auto;

      .text {
        width: 600px;
        line-height: 40px;

        p {
          font-size: 14px;
        }
      }

      img {
        height: 200px;
      }
    }

    .Lzvip_wtjd {
      background-color: #f6f9ff;
      overflow: hidden;

      .wtjd_content {
        width: 1200px;
        margin: 0 auto;
        padding-bottom: 60px;

        .Lvip_content_content_tcbt {
          margin-top: 100px;

          h3 {
            font-size: 40px;
            text-align: center;
            color: #404040;
          }

          p {
            font-size: 20px;
            text-align: center;
            color: #404040;

            span {
              display: inline-block;
              margin-top: 28px;
              width: 60px;
              height: 2px;
              background: linear-gradient(90deg, #4d95fc, #2b69d9);
            }
          }
        }

        .wtjd_content_content {
          position: relative;
          margin-top: 60px;

          .wtjd_content_content_sx {
            position: absolute;
            width: 2px;
            height: 259px;
            background: #e1e7f3;
            left: 9px;
            top: 0;
          }

          .wtjd_content_content_contet {
            margin-bottom: 30px;

            .wtjd_content_content_contet_top {
              overflow: hidden;

              .wtjd_content_content_contet_top_left {
                float: left;
                width: 20px;
                height: 20px;
                background: #ffffff;
                border: 3px solid #3f7ef2;
                border-radius: 50%;
                position: relative;
                z-index: 1;
                margin-right: 20px;

                h3 {
                  float: left;
                  margin-left: 20px;
                  font-size: 20px;
                  line-height: 20px;
                  color: #333333;
                }
              }
            }

            .wtjd_content_content_contet_bottom {
              margin-top: 10px;

              p {
                line-height: 20px;
                font-size: 14px;
                font-weight: 400;
                text-align: left;
                color: #333333;
                padding-left: 40px;
              }
            }
          }
        }
      }
    }
  }
}

/* 定义keyframe动画，命名为shake-slow */
@keyframes shake-slow {
  // 0%{opacity: 1;}
  // 100%{opacity: 0;}
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* 添加兼容性前缀 */
@-webkit-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-moz-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-ms-keyframes shake-slow {
  // 0% {opacity: 1; }
  // 100% { opacity: 0;}
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes shake-slow {
  // 0% { opacity: 1; }
  // 100% { opacity: 0; }
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  50.01% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
/* 定义shake-slow类*/
.shake-slow {
  color: #dd4814;
  animation: shake-slow 1s linear infinite;
  /* 其它浏览器兼容性前缀 */
  -webkit-animation: shake-slow 1s linear infinite;
  -moz-animation: shake-slow 1s linear infinite;
  -ms-animation: shake-slow 1s linear infinite;
  -o-animation: shake-slow 1s linear infinite;
  position: absolute;
  top: 45%;
  left: 25%;
  z-index: 9;
  // color: red;
  font-weight: 600;
  font-size: 28px;
  opacity: 0.2;
}
</style>
